<template>
  <view class="resume-addEducation">
    <custom-navbar title="新增教育经历" :auto-back="true" left-icon-color="#303133" />
    <up-gap height="30rpx" />
    <view class="block-box">
      <up-cell-group :border="false" :custom-style="{ padding: 0 }">
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              学历
            </text>
          </template>
          <template #value>
            <view @tap="showPicker">
              <up-input v-model="testModel" readonly :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              学校名称
            </text>
          </template>
          <template #value>
            <view @tap="showPicker">
              <up-input v-model="testModel" readonly :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              学院
            </text>
          </template>
          <template #value>
            <view @tap="showPicker">
              <up-input v-model="testModel" readonly :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              专业
            </text>
          </template>
          <template #value>
            <view @tap="showPicker">
              <up-input v-model="testModel" readonly :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              时间
            </text>
          </template>
          <template #value>
            <view @tap="showPicker">
              <up-input v-model="testModel" readonly :custom-style="{ border: 'none' }" font-size="26rpx" input-align="right" placeholder="请选择" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              留学经历
            </text>
          </template>
          <template #value>
            <up-switch v-model="switchVal" space="2" active-color="#1f50f2" inactive-color="#d6d8e0" />
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <view>
      <view class="h-190rpx pb-safe" />
      <view class="fixed bottom-0 left-0 w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe">
        <up-button
          :custom-style="{
            background: '#f3f4fa',
            color: '#1D2129',
            width: '338rpx',
            height: '82rpx',
            fontSize: '30rpx',
          }" shape="circle" text="删除"
        />
        <up-button
          :custom-style="{
            background: '#1f50f2',
            color: '#fff',
            width: '338rpx',
            height: '82rpx',
            fontSize: '30rpx',
          }" shape="circle" text="保存"
        />
      </view>
    </view>
    <up-picker :show="show" :columns="columns" key-name="label" @close="close" @confirm="confirm" @cancel="cancel" />
  </view>
</template>

<script setup lang="ts">
const testModel = ref('');
const switchVal = ref(false);
const show = ref(false);
const columns = ref([[{ label: '中国' }, { label: '美国' }, { label: '日本' }]]);
const showPicker = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
const confirm = ({ value }: { value: Array<{ label: string }> }) => {
  show.value = false;
  testModel.value = value.at(0)!.label;
};
const cancel = () => {
  show.value = false;
};
</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
  },
};
</script>

<style lang="scss" scoped>
.resume-addEducation {
  .block-box {
    @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)] rounded-[20rpx] bg-#fff p-24rpx pt-0 pb-30rpx;

    :deep(.u-cell__body) {
      padding: 12rpx 24rpx;
      min-height: 96rpx;
    }
  }
}
</style>
